<template>
  <div>
    <table-data ref="table" :config="table_config" :searchFormConfig="search_form_config">
      <template v-slot:status="slotData">
        <el-switch :disabled="slotData.data.id == switch_disabled" @change="switchChange(slotData.data)" v-model="slotData.data.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </template>
      <template v-slot:operation="slotData">
        <el-button type="primary" size="small" @click="edit(slotData.data.id)">编辑</el-button>
        <el-button type="danger" size="small" :loading="slotData.data.id == rowId" @click="onDelete(slotData.data.id)">删除</el-button>
      </template>
    </table-data>
    <add-cars-brand :flagVisible.sync="dialog_show" :id="dataId" @reload="search"  />
  </div>
</template>

<script>
import AddCarsBrand from "@c/dialog/addCarsBrand"
import TableData from "@c/tableData"
import { BrandDelete, BrandStatus } from "@/api/brand.js"


export default {
  name: "Parking",
  components: {
    AddCarsBrand,
    TableData
  },
  data() {
    return {
      dataId: "",
      rowId: "",
      switch_disabled: "",
      dialog_show: false,
      value: "",
      form: {
        brand: "",
        type: ""
      },
      options: [
        {
          value: 1,
          label: "江苏省",
          children: [
            {
              value: "2",
              label: "无锡市"
            }
          ]
        }
      ],
      table_config: {
        thead:[
          {label:"Logo",prop:"imgUrl",type:"image",width:100},
          {label:"车辆品牌",prop:"nameCh",type:"function",
            callback(row) {
              return `${row.nameCh}/${row.nameEn}`
            }
          },
          {
            label:"禁启用",
            prop:"status",
            type: "slot",
            slotName: "status"
          },
          {
            label:"操作",
            type: "slot",
            slotName: "operation"
          },
        ],
        url: "brandList",
        data: {
          pageSize: 10,
          pageNumber: 1
        }
      },
      search_form_config: {
        form_item: [
          {label:"车辆品牌",type:"Input",prop:"brand",placeholder:"请输入车辆品牌"},
        ],
        form_handler: [
          {label: "新增车辆品牌", prop:"add", type:"success",element:"btn",handler:this.add},
          // {label: "测试", prop:"test", type:"success",element:"btn",handler:this.test},
        ]
      },
    }
  },
  methods: {
    add() {
      this.dialog_show = true;
      this.dataId = "";
    },
    search() {
      const data = {
        pageSize: 10,
        pageNumber: 1
      }
      if(this.form.brand) {
        data.brand = this.form.brand;
      }
      this.$refs.table.requestData(data);
    },
    edit(id) {
      this.dialog_show = true;
      this.dataId = id;
    },
    onDelete(id) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.rowId = id;
        BrandDelete({id})
          .then((res) => {
            this.$message({
              type: 'success',
              message: res.message
            });
            this.rowId = ""
            this.$refs.table.requestData();
          }) 
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });  
        this.rowId = "";       
      });
    },
    switchChange(data) {
      const requestData = {
        id: data.id,
        status: data.status
      }
      this.switch_disabled = data.id;
      BrandStatus(requestData)
        .then((res) => {
          this.$message({
            type: 'success',
            message: res.message
          });
          this.switch_disabled = "";
        })
        .catch(()=>{this.switch_disabled = "";})
    }
  }
}
</script>

<style lang="scss" scoped>

</style>